<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">
    <el-form  :model="formInline" class="demo-form-inline" >
      <el-form-item  v-for="item in arr" :key="item.num">
        <div class="block">
          <el-date-picker
            v-model="item.value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            >
          </el-date-picker>
          <el-input v-model="input" :input="numInput(input)" type="Number" placeholder="请输入数字"></el-input>
        </div>
        
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">新建</el-button>
      </el-form-item>
    </el-form>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        formInline: {
          user: '',
          region: ''
        },
        input: '',
        arr:[],
        num: 0,
        value: '',
        pickerOptions: {
          start:'',
          end:'',
          disabledDate(time){
                let start = this.start
                    end = this.end
                    console.log(this.start, this.end);
                return time.getTime() < start  || time.getTime() > end;
            }
        },
      },
      methods: {
        onSubmit() {
          let a = {},arr = this.arr
          a.num = this.num
          a.value = this.value
          this.arr.push(a)
          console.log(this.arr);
          this.num++
          this.arr.forEach(item => {
            if(item.value.length){
            let start = new Date(item.value[0]).getTime()
                end = new Date(item.value[1]).getTime();
                console.log(start, end);
            this.pickerOptions.start = Math.min(start)
            this.pickerOptions.end = Math.max(end)
            console.log( this.pickerOptions.start,  this.pickerOptions.end);
            }
      
          })
        },
        numInput(e){
          console.log(e);
          this.input = e.replace(/[^\d-]/g,"");
          this.input = e.replace("-","$%$").replace(/\-/g,"").replace("$%$","-")
          this.input = e.replace(/\d{1,}-|\d{1,}\.\d{1,2}-/,"")
        }
      }
    })
  </script>

  <style>
    .el-input{
      width: 200px;
    }
  </style>
</body>

</html>